<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>10_案例练习-静态页面搭建</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>

            <tr>
                <td>马一</td>
                <td>18</td>
                <td>
                    <a href="javascript:;">删除</a>
                </td>
            </tr>

            <tr>
                <td>马二</td>
                <td>19</td>
                <td>
                    <a href="javascript:;">删除</a>
                </td>
            </tr>

            <tr>
                <td>马三</td>
                <td>20</td>
                <td>
                    <a href="javascript:;">删除</a>
                </td>
            </tr>
        </table>

        <input type="text" placeholder="请输入学生姓名"><br>
        <input type="text" placeholder="请输入学生年龄"><br>
        <input type="button" value="添加">

        <script>
            var inp_list = document.querySelectorAll('input');
            var tbody = document.querySelector('tbody');

            inp_list[2].onclick = function(){
                // 获取姓名和年龄
                var name = inp_list[0].value;
                var age = inp_list[1].value;

                if(name.trim() && age.trim()){
                    // 创建一个tr
                    var tr = document.createElement('tr');

                    // 将name放到td中
                    var td_name = document.createElement('td');
                    td_name.innerHTML = name;
                    tr.append(td_name);

                    // 将age放到td中
                    var td_age = document.createElement('td');
                    td_age.innerHTML = age;
                    tr.append(td_age)

                    // 将删除放到td中
                    var td_opera = document.createElement('td');

                    td_opera.innerHTML = '<a href="javascript:;">删除</a>';

                    // var a = document.createElement('a');
                    // a.href = "javascript:;";
                    // a.innerHTML = '删除';
                    // td_opera.append(a);

                    tr.append(td_opera)


                    tbody.append(tr);
                }else {
                    alert('请添加名字和年龄');
                }
            }
        </script>
    </body>
</html>